<template>
  <div>
    <el-button type="success" @click="addEquipment">新增</el-button>
    <el-table
      :data="gamelist"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="120">
      </el-table-column>
      <el-table-column
        prop="gname"
        label="游戏名"
        width="120">
      </el-table-column>
      <el-table-column

        prop="pic"
        label="图片"
        width="150">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.pic"
            fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column

        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button  @click.native.prevent="deleteRow(scope.$index,gamelist,scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[1,5,10,20]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <div>
      <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
        <el-form :model="game">
          <el-form-item v-show="false" label="id" :label-width="formLabelWidth" >
            <el-input v-model="game.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="game.gname"></el-input>
          </el-form-item>
          <el-form-item label="个人相片" :label-width="formLabelWidth">
            <el-upload
              class="upload-pic"
              :action="domain"
              :data="QiniuData"
              :on-remove="handleRemove"
              :on-error="uploadError"
              :on-success="uploadSuccess"
              :before-remove="beforeRemove"
              :before-upload="beforeAvatarUpload"
              :limit="1"
              multiple
              :on-exceed="handleExceed"
              :file-list="fileList"
              list-type="picture"
            >
              <el-button size="small" type="primary">选择图片</el-button>
            </el-upload>
            <div>
              <img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
            </div>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  import axios from 'axios'
  //import { Message } from 'element-ui'

  export default {
    name: "",
    data() {
      return {
        dialogStatus:'',
        gamelist: []
        ,
        params: {
          page: 1,
          size: 5
        },
        total: 100,
        dialogFormVisible: false,
        game: {
         ganme:'',
          pic:''

        },
        formLabelWidth: '120px'
        ,
        loading: false,
        QiniuData: {
          //key: '' ,//图片名字处理
          token: "",//七牛云token
          data: {}
        },
        domain: "http://upload-z1.qiniup.com", // 七牛云的上传地址（华东区）
        qiniuaddr: "http://qo24mi78y.hb-bkt.clouddn.com", // 七牛云的图片外链地址 七牛云空间的外链地址
        uploadPicUrl: "", //提交到后台图片地址
        fileList: [],
        page:1,
        size:5
      }
    },
    methods: {
      deleteRow(index, rows,row) {


        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("api/game/delete",{"id":row.id}).then(res=>{
            rows.splice(index, 1);
            console.log("del");
          })
          //axios.delete()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });



      },
      submit() {
        if (this.fileList.length > 0) {
          for (var i = 0; i < this.fileList.length; i++) {

            if (i == 0) {
              this.game.pic = this.fileList[i].url;
            }

          }
        }
        axios.post("api/game/add", this.game).then(res => {
          if (res.data.code == 200) {
            this.$message(res.data.mgs);
            this.dialogFormVisible = false;
          }
        })
      },
      findall(page,size) {
        axios.post("api/game/findAll",{page:page,size:size}).then(res => {

          this.gamelist = res.data.data;
          this.total=res.data.total;
        })
      },
      handleClick(row) {
        console.log(row);
        this.dialogFormVisible = true;
        //编辑弹框标题
        this.game.id=row.id;
        this.game.gname=row.gname;
        this.game.pic=row.pic;
        this.dialogStatus = "修改"
      },
      handleSizeChange(val) {
        console.log(val);
        this.size=val;
        this.findall(this.page,val)

      },
      handleCurrentChange(val) {
        this.page=val;
        this.findall(val,this.size);
      },
      addEquipment() {
        //显示弹框
        this.dialogFormVisible = true;
        //新增弹框标题
        this.dialogStatus = "新增";
      },
      //编辑
      handelEdit() {
        //显示弹框
        this.dialogFormVisible = true;
        //编辑弹框标题
        this.dialogStatus = "editEquipent"
      },
      handleRemove(file, fileList) {
        this.uploadPicUrl = "";
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 1 张图片，如需更换，请删除上一张图片在重新选择！`
        );
      },
      beforeAvatarUpload(file,response) {   //图片上传之前的方法
        // const isPNG = file.type === "image/png";
        // const isJPEG = file.type === "image/jpeg";
        // const isJPG = file.type === "image/jpg";
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isPNG && !isJPEG && !isJPG) {
        //   this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
        //   return false;
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 2MB!");
        //   return false;
        // }
        this.QiniuData.data = file;
        //this.QiniuData.key = `${file.name}`;
        console.log(this.QiniuData.key)
      },
      uploadSuccess(response, file, fileList) {  //图片上传成功的方法
        //console.log(fileList);
        //console.log(response);
        //console.log(file);
        this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
        //console.log(this.uploadPicUrl);
        this.fileList.push({url:this.uploadPicUrl});
        //console.log(this.fileList[0].url+"dddddddddddddd");
      },
      uploadError(err, file, fileList) {    //图片上传失败时调用
        this.$message({
          message: "上传出错，请重试！",
          type: "error",
          center: true
        });
      },
      beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${ file.name }？`);
      },
      //提交数据到后台
      handleSubmit() {

      },
      //请求后台拿七牛云token
      getQiniuToken() {  //token
        axios.get("api/game/gettoken").then(res=>{
          this.QiniuData.token=res.data.data;
        })
        //console.log(uploadtoken);
        //this.QiniuData.token= uploadtoken.data.token
      }
    },
    mounted() {
      this.findall(this.page,this.size);
      this.getQiniuToken();

    }
  }
</script>

<style scoped>

</style>
